<template>
    <div id="teacher-det">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item :to="{ path: '/teacher' }">教师管理</el-breadcrumb-item>
            <el-breadcrumb-item>教师详情</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="form mt10 contentBox">
            <div class="list_head">
                <span class="head_name">教师信息</span>
                <el-button type="primary" @click="$router.push('/teacher')" class="fr">返回</el-button>
            </div>
            <el-form label-width="120px" :model="form" ref="form" disabled>
                <el-form-item label="学校：" prop="schoolName" required>
                    <el-input v-model="form.schoolName"></el-input>
                </el-form-item>
                <el-form-item label="教师姓名：" prop="name" required>
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别：" prop="gender" required>
                    <el-radio-group v-model="form.gender">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone" required>
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="教职工号：" prop="workNumber" required>
                    <el-input v-model="form.workNumber"></el-input>
                </el-form-item>
                <el-form-item label="管理班级：">
                    <div class="campContain">
                        <span v-for="(item,index) in form.manageClasses" class="campSpan" :key="index">{{item}}</span>
                    </div>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";
    export default {
        data() {
            return {
                id: this.$util.getUrlParam("id"),
                schoolId: "",
                form: {
                    schoolName: "",
                    name: "",
                    gender: "1",
                    phone: "",
                    workNumber: ""
                }
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.$util.setStore("teacSelect", "1");
            this.getDetail();
        },
        methods: {
            //获取教师详情
            getDetail() {
                this.$axios.get("/adminapi/v1/tools/teachers/info?teacherId=" + this.id).then(response => {
                    if (response.data.error == 10000) {
                        let info = response.data.data;
                        this.schoolId = info.schoolId;
                        let manageClasses = [];
                        if (info.teacherClassModelList && info.teacherClassModelList.length) {
                            info.teacherClassModelList.forEach(item => {
                                let gradeName = this.$util.gradeFormat(item.grade * 1);
                                let className = gradeName + item.number + "班";
                                item.className = item.className ? className + `（${item.className}）` : className;
                                manageClasses.push(item.className);
                            });
                        }
                        this.form = {
                            name: info.name,
                            schoolName: info.schoolName,
                            gender: info.gender + "",
                            phone: info.phone + "",
                            workNumber: info.workNumber + "",
                            manageClasses: manageClasses
                        };
                    }
                })
            }
        }
    }
</script>
<style>
    #teacher-det .campContain {
        width: 700px;
        height: 135px;
        margin-top: 20px;
        border: solid 1px gray;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    #teacher-det .campSpan {
        display: block;
        text-align: center;
        float: left;
        padding: 0 30px 0px 15px;
        border: solid 1px #999;
        border-radius: 5px;
        margin: 10px;
        box-sizing: border-box;
        font-size: 12px;
        position: relative;
        cursor: pointer;
    }

    #teacher-det .campSpan i {
        width: 20px;
        height: 20px;
        line-height: 20px;
        color: #999;
        position: absolute;
        right: 5px;
        top: 11px;
    }
</style>